<template>
    <div style="width: 100%;height: 100%;overflow: hidden">
        <div class="header">
            <a-row>
                <a-col :span="13">
                    <a-page-header
                        :title="videoTitle"
                        @back="back"
                    />
                </a-col><a-col :span="3"></a-col>

                <a-col :span="6">
                    <div class="search">
                        <a-input-search
                            v-model:value="inputValue"
                            placeholder="input search text"
                            @search="onSearch"
                        />
                    </div>
                </a-col>
                <a-col :span="2">
                    <div style="margin-top: 23px;margin-left: 40px">
                        <a style="color: #666666">登录</a>
                    </div>
                </a-col>
            </a-row>
        </div>

        <div class="video">
            <div style="height: 100%;" class="videoLeft">
                <div style="height: 100%;" id="J_prismPlayer"></div>
            </div>

            <div class="videoRight">
                <div style="text-align: center;margin-top: 180px;">
                    <a-image
                        :preview="false"
                        style="cursor: pointer"
                        :width="37"
                        src="http://r.photo.store.qq.com/psc?/V10Bsjnz0pGIO7/ruAMsa53pVQWN7FLK88i5raPY3I6zM9o1yiDhkHbNEUZ*Rh.DTqswwjvi*HIOFqPIc66SPYoYilvQxWfVhb7F.*XRNrRD2Y0HKnyioLxagA!/r"
                        @click="showChapter"
                    />
                    <a style="color: #BFBFBF;font-size: 10px;" @click="showChapter"><p style="text-align: center">章节</p></a><br>
                </div>

                <div style="text-align: center;">
                    <a-image
                        :preview="false"
                        style="cursor: pointer"
                        :width="37"
                        src="http://r.photo.store.qq.com/psc?/V10Bsjnz0pGIO7/ruAMsa53pVQWN7FLK88i5mI*xgDBigenZiMo6f1q04SzsiTZhQbw6iikGmzglroAjl9XPiaoxubvhATAo9S39Yj3YxttfKRvrDvZMd5w3s4!/r"
                        @click="note"
                    />
                    <a style="color: #BFBFBF;font-size: 10px;" @click="note"><p style="text-align: center">笔记</p></a><br>
                </div>

                <div style="text-align: center;cursor: pointer">
                    <a-image
                        :preview="false"
                        style="cursor: pointer"
                        :width="37"
                        src="http://r.photo.store.qq.com/psc?/V10Bsjnz0pGIO7/ruAMsa53pVQWN7FLK88i5hf*G5BToxXADLQdhe.B1EFU8PLEQo*z5glIATPK5leX.0dBWMY.azBUx21r5X0ohpE5RTG5E4QfW8ki92frlkQ!/r"
                        @click="code"
                    />
                    <a style="color: #BFBFBF;font-size: 10px;" @click="code"><p style="text-align: center">编码</p></a><br>
                </div>

                <div style="text-align: center;" >
                    <a-image
                        style="cursor: pointer"
                        :preview="false"
                        :width="35"
                        src="http://r.photo.store.qq.com/psc?/V10Bsjnz0pGIO7/ruAMsa53pVQWN7FLK88i5ut0Y65ucu8n1W5fbXrdETPKKl49deqpZTG8mzd1u0hVqBHoZkjrVLetxbi.6g9qzyLZA.MxSvq6Krtz0wp1U5Q!/r"
                        @click="download"
                    />
                    <a style="color: #BFBFBF;font-size: 10px;" @click="download"><p style="text-align: center">下载课程讲义</p></a><br>
                </div>

            </div>
        </div>
    </div>

</template>


<script>
import {computed, onMounted, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";

    export default {
        name: 'Video',
        setup(){
            const state = reactive({
                inputValue: '',
                player: '',          //播放器
                videoUrl: '',        //视频地址
                videoTitle:'',       //视频标题
                videoCover:''
            })

            const router = useRouter()
            //路由传参
            const saveTime = function (memoryVideo,currentTime) {
                localStorage.setItem(memoryVideo, currentTime);
            }

            const getTime = function (memoryVideo) {
                //return返回的是自定义起播时间
                return localStorage.getItem(memoryVideo)
            }
            onMounted(()=>{
                if(router.currentRoute.value.params.url){
                    state.videoUrl = router.currentRoute.value.params.url
                }else{
                    state.videoUrl = window.localStorage.getItem('url')
                    console.log(state.videoUrl)
                }
                if(router.currentRoute.value.params.title){
                    state.videoTitle = router.currentRoute.value.params.title
                }else{
                    state.videoTitle = window.localStorage.getItem('title')
                    console.log(state.videoTitle)
                }
                if(router.currentRoute.value.params.cover){
                    state.videoCover = router.currentRoute.value.params.cover
                }else{
                    state.videoCover = window.localStorage.getItem('cover')
                    console.log(state.videoCover)
                }
                state.player = new Aliplayer({
                    id: "J_prismPlayer",
                    source: state.videoUrl,
                    cover: state.videoCover,
                    width: "100%",
                    height: "500px",
                    /* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
                    autoplay: false,
                    preload: false,
                    isLive: false,
                    components: [{
                        name: 'MemoryPlayComponent',
                        type: AliPlayerComponent.MemoryPlayComponent,
                        args:[false,getTime,saveTime]
                    }, {
                        name: 'RateComponent',
                        type: AliPlayerComponent.RateComponent
                    }]
                }, function (player) {
                    console.log("The player is created");
                });
            })

            const back = () => {
                router.go(-1)
            }

            const showChapter = function (){
                message.success("获取章节成功")
            }

            const note = function (){
                message.success('笔记')
            }

            const code = function (){
                message.success('编码')
            }

            const download = function (){
                message.success('下载成功')
            }

            const onSearch = searchValue => {
                message.success('您输入的值为' + state.inputValue)
            };

            return{
                ...toRefs(state),
                back,
                onSearch,
                note,
                download,
                code,
                showChapter,
            }
        }
    }
</script>


<style>
.header{
    height: 9.5vh;
    background: rgba(242, 242, 242, 1);
}

.search{
    margin-top: 18px;
    float: right;
}

.video{
    height: 90.45vh;
    width: 100%;
}

.videoRight{
    background-color: rgba(28, 31, 33, 1);
    height: 90.4vh;
    width: 5%;
    position: absolute;
    top: 9.5vh;
    right: 0;
}
.memory-play-wrap{
    z-index: 1;
}

.ant-input-search:hover{
    background-color: #666666;
}
</style>
